<template>
  <div class="login-form-content">
    <el-form :model="form" status-icon :rules="rules" ref="ruleFormRef" label-width="10px">
      <el-form-item prop="account">
        <span class="svg-container">
          <img class="login_person" src="@/assets/login/user.png" />
        </span>
        <el-input type="text" v-model="form.account" ref="account" placeholder="请输入登录账号"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <img src="@/assets/login/lock-fill.png" />
        </span>
        <el-input v-model="form.password" placeholder="请输入密码" auto-complete="on" ref="password"
          :type="passwordType">
        </el-input>
        <span class="show-pwd" @click="showPwd">
          <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
          <!-- <img v-if="passwordType === 'password'"
            src="https://static.lianhaikeji.com/unimall/22F00E7A71F94573AA0F72E313610669.png"
            alt="" />
          <img v-else
            src="https://static.lianhaikeji.com/unimall/620A70B20C6E449CB1725E5448E59044.png"
            alt="" /> -->
            <span v-if="passwordType === 'password'" class="iconfont icon-eye-close"></span>
            <span v-else class="iconfont icon-eye-open"></span>
        </span>
      </el-form-item>

      <el-form-item prop="verifyText">
        <span class="svg-container">
          <img src="@/assets/login/verification.png" />
        </span>
        <el-input v-model="form.verifyText" class="input-code" placeholder="验证码" auto-complete="on"
          ref="code">
        </el-input>
        <span class="code-img">
          <img class="login_password" :src="'data:image/png;base64,' + imgSrc" @click="getImage" />
        </span>
      </el-form-item>

      <el-form-item style="margin-top:3vw;">
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="login" :loading="loading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus/es";
import { getVerifyImage, login } from "@/api/login";
import { useDelCache } from "@/compositions/main/useDelCache";
import store from "@/store";
const emits = defineEmits(["login"]);
const loading  = ref(false);

const ruleFormRef = ref<FormInstance>();
const form = reactive({
  account: "",
  password: "",
  verifyToken: "",
  verifyText: "",
});
const rules = reactive({
  account: [
    {
      required: true,
      message: "请输入登录账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      },
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  verifyText: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
});

const imgSrc = ref("");
const passwordType = ref("password");

const showPwd = () => {
  passwordType.value = passwordType.value == "password" ? "text" : "password";
};

const getImage = async () => {
  const rs = await getVerifyImage();
  if (rs.code == 200) {
    // console.log('[ rs ]', rs)
    form.verifyText = ""
    form.verifyToken = rs.payload.codeId;
    imgSrc.value = rs.payload.imgCodeBase64;
  }
};


const keyDown = (e: any) => {

  // 回车则执行登录方法 enter键的ASCII是13
  if (e.keyCode == 13 || e.keyCode == 108) {
    submitForm(ruleFormRef.value);
  }
};


const submitForm = (formEl: FormInstance | undefined) => {
  loading.value = true;
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      const rs = await login(form);
      if (rs.code == 200) {
        emits("login",rs.payload)
      } else {
        loading.value = false;
        await getImage();
      }
    } else {
      console.log("error submit!", fields);
      loading.value = false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

onMounted(async () => {
  await getImage();
  useDelCache()
  document.addEventListener('keydown', keyDown)
});

onBeforeUnmount(() => {
  document.removeEventListener('keydown', keyDown)
})
</script>

<style scoped lang="scss">
.login-form-content {
  width: 100%;
  position: relative;

  :deep(.el-form) {
    width: 100%;
    margin-top: 5%;
    text-align: center;
  }

  :deep(.el-form-item) {
    background: #F2F4F9;
    border-radius: 5px;
    color: #ABAFB2;
    margin-bottom: 22px;

    .el-input {
      width: calc(100% - 85px);
      display: inline-block;
      height: 48px;

      input {
        background: transparent;
        border: none;
        outline: none;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 0 5px 0 15px;
        color: #ABAFB2;
        height: 100%;
        box-shadow: none;
        width: 100%;

        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px #f4f5f9 inset !important;
          box-shadow: 0 0 0px 1000px #f4f5f9 inset !important;
          -webkit-text-fill-color: #333 !important;
        }
      }

      &.input-code {
        width: calc(100% - 122px);
      }
    }
  }

  :deep(.el-form-item__content) {
    line-height: 48px;
    position: relative;
    font-size: 14px;
    margin: 0 !important;
  }

  :deep(.el-input__wrapper) {
    height: 48px;
    width: 100%;
    background-color: transparent;
    box-shadow: none;

    &:hover {
      box-shadow: none;
    }
  }

  .svg-container {
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-top: -3px;
    margin-left: 16px;
    display: inline-block;

    img {
      width: 100%;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    font-size: 20px;
    color: #889aa4;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .code-img {
    width: 122px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;

    img {
      width: 122px;
      height: 100%;
    }
  }

  .login {
    width: 100%;
    height: 40px;
    background: #1964FA;
    border-radius: 4px;
    font-size: 18px;
    color: #FFFFFF;
    border: 0;
    transition: all .3s;
    &:hover{
      box-shadow: 0px 2px 8px 3px rgba(25, 100, 250, 0.27);
    }
  }
}
</style>
